<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="翻译平台、翻译网站、找翻译、找人翻译、法语翻译、英语翻译、日语翻译、德语翻译、意大利语翻译、俄罗斯语、翻译人员、成都翻译、成都翻译员" />
<meta name="description" content="众译，助推翻译事业，选择最佳翻译人员，最迅速、最便捷的网络翻译平台。" />
<title>Transer翻译服务网站-个人中心</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/reset.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/css.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/ui-lightness/jquery-ui-1.8.7.custom.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/global.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/config.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/AjaxAction.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/chooselanguage.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/industry.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/passport/service/js/deletepair.js"></script>
<script type="text/javascript">
	var context = '<%=request.getContextPath()%>';

	$(function () {
		initLanguage("langFrom", '');
		initLanguage("langTo", '');
		initLanguage("native", '<s:property value="%{#session.SESSION_USER.nativeLang}"/>');
		initType("goodAtType", '<s:property value="%{#session.SESSION_USER.goodAt}"/>');
		replaceArea();
		replaceLanguage();
		$("#choosearea").bind('click', openIndustryWindow);
		$(".savebtn").bind('click', saveHandler);
		$("#add_pair_btn").bind('click', addPairHandler);
	});
	
	var industryWindow = null;
	
	function replaceLanguage() {
		$(".lang_txt").each(function (index){
			var lang_id = $(this).text().split(",");
			var txt = new Array();
			for (var i = 0 ; i < lang_id.length; i++) {
				txt.push(getTranslate(lang_id[i]));
			}
			$(this).text(txt.join(","));
		});
	}
	
	function openIndustryWindow() {
		try {
			if (industryWindow == null) {
				industryWindow = new IndustryWindow(true);
			}
		} catch (e) {
			alert(e);
			return;
		}
		industryWindow.show(setGoodAtArea, $("#area_direction").val());
	}
	
	function setGoodAtArea(obj, args) {
		if (args.length <= 0) {
			return;
		}
		
		var txt = new Array();
		var hids = new Array();
		for (var i = 0 ; i < args.length ; i ++) {
			txt.push(args[i].txt);
			hids.push(args[i].id);
		}
		
		$(".area_txt").text(txt.join(","));
		$("#area_direction").val(hids.join(","));
	}
	
	function replaceArea() {
		var area_id = $("#area_direction").val().split(",");
		var txt = new Array();
		for (var i = 0 ; i < area_id.length; i++) {
			txt.push(findIndustry(area_id[i]));
		}
		$(".area_txt").text(txt.join(','));
	}
	
	function addPairHandler() {
		if ($(".cls_pais").length >= 6) {
			$("#div_message").text('最多只能添加6个语言方向.');
			return;
		}
		var lf = $("#langFrom").val();
		var lt = $("#langTo").val();
		if (lf == '0') {
			$("#div_message").text('请选择源语言.');
			return;
		}
		if (lt == '0') {
			$("#div_message").text('请选择目标语言.');
			return;
		}
		if (lf == lt) {
			$("#div_message").text('源语言与目标语言不能相同.');
			return;
		}
		// 检测手机和翻译经验
		AjaxAction.executeWithHTML(context + '/passport/', 'language_setup_addpair', {"langFrom":lf, "langTo":lt}, addSuccessCallback, addErrorCallback);
		$("#add_pair_btn").unbind('click');
		$("#div_loading").show();
	}
	
	function addSuccessCallback(data, status) {
		var result = $(data).find("msg").text();
		if ('success' == result || 'success' == status) {// 成功
			location.reload(true);
		} else {
			$("#div_message").text('添加失败,请稍后再试.');
		}
		$("#add_pair_btn").bind('click', addPairHandler);
		$("#div_loading").hide();
	}
	
	function addErrorCallback() {
		$("#add_pair_btn").bind('click', addPairHandler);
		$("#div_loading").hide();
		$("#div_message").text('保存数据失败,请稍后再试.');
	}
	
	// 保存
	function saveHandler() {
		// 检测手机和翻译经验
		AjaxAction.executeWithHTML(context + '/passport/', 'language_setup_save', $('#edit_form').serialize(), saveSuccessCallback, saveErrorCallback);
		$(".savebtn").unbind('click');
		$("#div_loading").show();
	}
	
	// 保存执行结果成功
	function saveSuccessCallback(data, status) {
		var result = $(data).find("msg").text();
		if ('success' == result || 'success' == status) {// 成功
			$("#div_message").text('保存成功.');
		} else {
			$("#div_message").text('保存数据失败,请稍后再试.');
		}
		$(".savebtn").bind('click', saveHandler);
		$("#div_loading").hide();
	}
	
	// 保存执行错误
	function saveErrorCallback(){
		$(".savebtn").bind('click', saveHandler);
		$("#div_loading").hide();
		$("#div_message").text('保存数据失败,请稍后再试.');
	}
</script>
</head>
<body>
<div class="layout">
<jsp:include page="/include/head/top.jsp"/>
<jsp:include page="/include/head/top_nav.jsp"/>
<div class="content">
	<jsp:include page="../left.jsp" >
		<jsp:param value="2" name="parent"/>
		<jsp:param value="9" name="child"/>
	</jsp:include>
    <div class="col_r">
   	<s:if test="%{#session.SESSION_USER.langNotSetup()}">
	    <div class="tip t">
		    	<p>您还没有设置语言方向及熟悉方向。</p>
		</div>
    </s:if>
    <div class="steps">
		     <div class="step_part" id="tab1">
				 <h1><a class="current" href="javascript:void(0)">语言设置</a></h1>
			 </div>
 <div class="col_left">
 <div id="box1">
 <div class="box block">
<form action="" id="edit_form" enctype="application/x-www-form-urlencoded" method="post">
	<table class="table_data">
		<tr>
			<td width="170"></td>
			<td></td>
			<td></td>
		</tr>
	  <tr>
	    <td align="right">语言方向：</td>
	    <td>
	    <select id="langFrom"><option value="0">源语言</option></select>
	    <b>»</b>
	    <select id="langTo"><option value="0">目标语言</option></select>
	    </td>
	    <td><input type="button" value="确认添加" class="bton" id="add_pair_btn"/></td>
	  </tr>
	   <tr>
	    <td align="right">已选择语言方向：</td>
	    <td id="pairs">
	    	<s:iterator value="#session.SESSION_USER.languagePairs" var="item">
	    		<span class="cls_pais" id="pair_<s:property value='#item.id'/>">
	    		<b class="lang_txt"><s:property value="#item.langFrom"/></b>
	    		<em>»</em>
	    		<b class="lang_txt"><s:property value="#item.langTo"/></b>
	    		<a href="javascript:void(0)" onclick="javascript:deletePair('<s:property value='#item.id'/>')">删除</a></span>
	    	</s:iterator>
	    </td>
	    <td>&nbsp;</td>
	  </tr>
	  <tr>
			<td align="right">擅长领域：</td>
			<td>
			<span class="area_txt"></span>
			<input type="button" value="请选择您的擅长领域" style="width:150px;" id="choosearea"/>
			<input type="hidden" value="<s:property value='%{#session.SESSION_USER.goodAtArea}'/>" id="area_direction" name="dump.goodAtArea"/>
			</td>
			<td>&nbsp;</td>
		</tr>
	  <tr>
	    <td align="right">擅长方面：</td>
	    <td id="goodAtType"></td>
	    <td>&nbsp;</td>
	  </tr>
	  <tr>
	    <td align="right">母语：</td>
	    <td><select id="native" name="dump.nativeLang"><option>请选择你的母语</option></select></td>
	    <td>&nbsp;</td>
	  </tr>
	  <tr>
	    <td align="right">&nbsp;</td>
	    <td>
	    <input type="button" class="savebtn" value="" />
		<div class="button_center" id="div_loading" style="display: none;">
			<img src="<%=request.getContextPath() %>/images/loading.gif" alt="loading" /><span>正在保存数据,请稍等...</span>
		</div>
		<div class="button_center" id="div_message">
		</div>
	    </td>
	    <td>&nbsp;</td>
	  </tr>
	</table>
</form>
</div>
        <div class="box none">News Box</div>
        <div class="box none">Article Box</div>
</div>
</div>
		 </div>
    </div>
</div>
<jsp:include page="/include/foot/foot.jsp" />
</div>
</body>
</html>
